<template>
	<div class="banner-container outer-container">
		<div class="banner">
			<a 
                :href="banner.link_url" 
                v-for='banner in banner_list' 
                :class='{"banner-active":banner.selected,"banner-hidden":!banner.selected}'  
                :key='banner.img_url'  
                :style="{backgroundImage: 'url('+banner.img_url+')'}">
			</a>
            <div class="dots">
                <span v-for='(item,index) in banner_list' :class='{"dot-active":item.selected}' @click='dotChoose(index)' :key="index"></span>
            </div>
		</div>
        <div class="search-box">
            <input type="search" placeholder="输入医生、项目、医院或圈子">
            <span class="common-bg"></span>
        </div>
	</div>
</template>
<script type="text/javascript">
	export default {
		props:['banner_list','catgory_list'],
		data(){
			return {
				currentIndex: 0,
				timer: '',
			}
		},
		created(){
			this.timer = setInterval(()=>{this.crousel(this.currentIndex+1)},5000);
		},
		beforeDestroy (){
			 window.clearTimeout(this.timer);
		},
		methods: {
			crousel(index){
				if(this.banner_list.length < 1){
					return;
				}
				this.$set(this.banner_list[this.currentIndex],'selected',false);
				if(index == -1){
					index = this.banner_list.length - 1;
				}
				if(index == this.banner_list.length){
					index = 0;
				}
				this.currentIndex = index;
				this.$set(this.banner_list[index],'selected',true);
			},
			dotChoose(index){
				this.$set(this.banner_list[this.currentIndex],'selected',false);
				this.$set(this.banner_list[index],'selected',true);
				this.currentIndex = index;
			},
		}
	}
</script>
<style lang="less" scoped>
.banner-container{
	@height: 524px;
    position: relative;
    // margin-bottom: 70px;
	.banner{
		// position: absolute;
		width: 100%;
		height: @height;
        overflow: hidden;
        a{
			width: 100%;
			position: absolute;
			z-index: 2;
			display: inline-block;
			height: @height;
			background-color: cornflowerblue;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	.dots{
		width: 100%;
		position: absolute;
        bottom: 10px;
        right: 20px;
		text-align: right;
		span{
			position: relative;
			z-index: 3;
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 100%;
			margin-right: 10px;
			cursor: pointer;
			background: transparent;
			border: 0.5px solid #333;
		}
	}
	.dot-active{
		background-color:#333 !important;
	}
	.banner-active{
		opacity: 1;
		transition: opacity 1.5s;
		animation: bigger 4s ease;
	}
	.banner-hidden{
		opacity: 0;	
		background: transparent;
		transition: opacity 1.5s;
	}
	@keyframes bigger{
		// 0%{
		// 	transform:scale(1.07);
		// }
		// 100%{
		// 	transform: scale(1);
		// }
    }
    .search-box{
        // position: relative;
        position: absolute;
        text-align: center;
        bottom: -30px;
        left: 130px;
		z-index: 2;
        input{
			background: #fff;
            width: 940px;
            height: 50px;
            text-align: center;
            color: #9b9b9b;
            border-radius: 8px;
            box-shadow:0 0 2px 1px rgba(0, 0, 0, 0.05);
            padding: 0 100px 0 10px;
        }
        span{
            cursor: pointer;
            display: inline-block;
            width: 80px;
            height: 50px;
            position: absolute;
            right: 14px;
            bottom: 10px;
            border-radius: 8px;
            background-image: url('../../../static/img/icon_search.png');
            background-size: 24px; 
            background-position: center;
        }
    }
}
</style>